<template>
  <div class="home-category-nav relative bg-white rounded shadow-sm">
    <ul class="top-level-nav flex px-4">
      <li
        v-for="(category, index) in categoryNavData"
        :key="category.id"
        class="py-3 px-4 text-base font-medium cursor-pointer hover:text-red-500 relative"
        @mouseenter="showPanel(index)"
        @mouseleave="hidePanelWithDelay"
      >
        {{ category.name }}
      </li>
    </ul>

    <!-- Dropdown Panel -->
    <transition name="fade">
      <div
        v-show="activePanelIndex !== null && currentPanelData"
        class="category-panel absolute top-full left-0 w-[1400px] bg-white shadow-lg rounded border border-gray-200 z-50 p-6"
        @mouseenter="cancelHidePanel"
        @mouseleave="startHidePanel"
      >
        <div v-if="currentPanelData" class="flex flex-row gap-6">
          <!-- Sub Categories Column -->
          <div class="sub-categories w-1/4 space-y-3">
            <dl v-for="subGroup in currentPanelData.subCategories" :key="subGroup.title" class="text-sm">
              <dt class="font-semibold text-gray-800 mb-1">{{ subGroup.title }}</dt>
              <dd v-for="item in subGroup.items" :key="item.name" class="text-gray-600 hover:text-red-500">
                <a :href="item.link || '#'">{{ item.name }}</a>
              </dd>
            </dl>
          </div>

          <!-- Recommended Products Column -->
          <div class="recommended-products w-1/2">
            <h4 class="font-semibold text-gray-800 mb-3 text-sm">推荐商品</h4>
            <div class="grid grid-cols-3 gap-4">
              <a v-for="product in currentPanelData.products" :key="product.id" :href="product.link || '#'" class="product-item text-center text-xs group">
                <img :src="product.imgUrl" :alt="product.name" class="w-20 h-20 object-contain mx-auto mb-1 group-hover:opacity-80 transition-opacity">
                <p class="text-gray-700 truncate group-hover:text-red-500">{{ product.name }}</p>
                <p class="text-red-500">¥{{ product.price }}</p>
              </a>
            </div>
          </div>

          <!-- Brands Column -->
          <div class="brands w-1/4">
             <h4 class="font-semibold text-gray-800 mb-3 text-sm">推荐品牌</h4>
             <div class="grid grid-cols-2 gap-2">
               <a v-for="brand in currentPanelData.brands" :key="brand.name" :href="brand.link || '#'" class="brand-item border rounded hover:shadow-sm transition-shadow flex items-center justify-center p-1 h-12">
                 <img :src="brand.logoUrl" :alt="brand.name" class="max-h-8 max-w-full object-contain">
               </a>
             </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface SubCategoryItem {
  name: string;
  link?: string;
}
interface SubCategoryGroup {
  title: string;
  items: SubCategoryItem[];
}
interface ProductItem {
  id: number;
  name: string;
  price: number;
  imgUrl: string;
  link?: string;
}
interface BrandItem {
  name: string;
  logoUrl: string;
  link?: string;
}
interface CategoryPanelData {
  subCategories: SubCategoryGroup[];
  products: ProductItem[];
  brands: BrandItem[];
}
interface TopLevelCategory {
  id: number;
  name: string;
  panelData: CategoryPanelData;
}

// --- Placeholder Data ---
const createPlaceholderProduct = (id: number, name: string): ProductItem => ({
  id, name, price: 99, imgUrl: 'https://via.placeholder.com/80x80/eee/999?text=P',
});
const createPlaceholderBrand = (name: string): BrandItem => ({
  name, logoUrl: `https://via.placeholder.com/80x30/eee/999?text=${encodeURIComponent(name)}`,
});

const categoryNavData = ref<TopLevelCategory[]>([
  {
    id: 1, name: '配件', panelData: {
      subCategories: [
        { title: '热门分类', items: [{ name: '手机壳' }, { name: '贴膜' }, { name: '充电器' }, { name: '数据线' }] },
        { title: '手机数码', items: [{ name: '耳机' }, { name: '移动电源' }, { name: '蓝牙音箱' }] }
      ],
      products: [
        createPlaceholderProduct(1, '商品A'), createPlaceholderProduct(2, '商品B'), createPlaceholderProduct(3, '商品C'),
        createPlaceholderProduct(4, '商品D'), createPlaceholderProduct(5, '商品E'), createPlaceholderProduct(6, '商品F'),
      ],
      brands: [ createPlaceholderBrand('品牌1'), createPlaceholderBrand('品牌2'), createPlaceholderBrand('品牌3'), createPlaceholderBrand('品牌4') ]
    }
  },
  {
    id: 2, name: '服装', panelData: {
       subCategories: [
        { title: '上装', items: [{ name: 'T恤' }, { name: '衬衫' }, { name: '卫衣' }, { name: '毛衫' }] },
        { title: '下装', items: [{ name: '休闲裤' }, { name: '牛仔裤' }, { name: '短裤' }] }
      ],
      products: [ createPlaceholderProduct(7, '服装G'), createPlaceholderProduct(8, '服装H'), createPlaceholderProduct(9, '服装I') ],
      brands: [ createPlaceholderBrand('品牌5'), createPlaceholderBrand('品牌6') ]
    }
   },
   { id: 3, name: '餐厨', panelData: { /* ... more data ... */ subCategories: [], products: [], brands: [] } },
   { id: 4, name: '居家', panelData: { /* ... more data ... */ subCategories: [], products: [], brands: [] } },
   { id: 5, name: '洗护', panelData: { /* ... more data ... */ subCategories: [], products: [], brands: [] } },
   { id: 6, name: '婴童', panelData: { /* ... more data ... */ subCategories: [], products: [], brands: [] } },
   { id: 7, name: '电器', panelData: { /* ... more data ... */ subCategories: [], products: [], brands: [] } },
   { id: 8, name: '杂货', panelData: { /* ... more data ... */ subCategories: [], products: [], brands: [] } },
   { id: 9, name: '饮食', panelData: { /* ... more data ... */ subCategories: [], products: [], brands: [] } },
   { id: 10, name: '品牌', panelData: { /* ... more data ... */ subCategories: [], products: [], brands: [] } },
]);

const activePanelIndex = ref<number | null>(null);
const hidePanelTimer = ref<NodeJS.Timeout | null>(null);

const currentPanelData = computed(() => {
  return activePanelIndex.value !== null ? categoryNavData.value[activePanelIndex.value]?.panelData : null;
});

function showPanel(index: number) {
  cancelHidePanel(); // Clear any pending hide timer
  activePanelIndex.value = index;
}

function hidePanelWithDelay() {
  // Start a timer to hide the panel after a short delay
  hidePanelTimer.value = setTimeout(() => {
    activePanelIndex.value = null;
  }, 200); // Adjust delay as needed (e.g., 200ms)
}

function cancelHidePanel() {
  // Clear the hide timer if the mouse enters the panel or another nav item
  if (hidePanelTimer.value) {
    clearTimeout(hidePanelTimer.value);
    hidePanelTimer.value = null;
  }
}

function startHidePanel() {
    // When leaving the panel itself, hide it immediately or after a delay
    hidePanelWithDelay(); // Reuse the delay logic
}

</script>

<style scoped>
.category-panel {
  /* Ensure it appears above other content */
  top: 100%; /* Position directly below the nav bar */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Simple fade transition */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style> 